<template>
    <div class="content1">
        <div class="content1__top">
            <div class="content1__top-t">
                <el-input v-model="unit" maxlength="50" placeholder="请在这里填写单元名称。例如unit1"></el-input>
                <el-button @click="handleAddUnit" type="primary">添加单元</el-button>
            </div>
            <div class="content1__top-b">
                <span>*</span> (必填) 单元名可填英文或汉字，长度不要超过50字符。课本内容由单元及其下的课文组成。
            </div>

        </div>
        <div class="content1__bottom">

            <el-table style="min-width: 1300px" :data="tableData" stripe :row-key="handleRowkey" border
                default-expand-all :header-cell-style="{ backgroundColor: '#6FA5DE', color: '#fff', fontSize: '16px' }"
                :cell-style="handleRowStyle" :tree-props="{ children: 'content', hasChildren: 'hasChildren' }">
                <el-table-column prop="title" label="单元名称以及单元下的课文">
                </el-table-column>
                <el-table-column prop="sort_num" label="排序" width="120">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort_num" type="number" size="mini"
                            @blur="onSort($event, scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="500">
                    <template slot-scope="scope">

                        <template v-if="scope.row.cw_id">
                            <el-button size="mini" @click="handleDelUnit(scope.row)">删除单元</el-button><el-divider
                                direction="vertical"></el-divider>
                            <el-button type="primary" @click="handleEditUnit(scope.row)" size="mini">更改单元</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <!-- <el-dropdown @command="handleCommand($event, scope.row.id)">
                                <el-button type="primary" size="mini" class="el-dropdown-link">
                                    制作新课文<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="audio">制作音频课件</el-dropdown-item>
                                    <el-dropdown-item command="video">制作视频课件</el-dropdown-item>
                                    <el-dropdown-item command="ppt">制作PPT课件</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown> -->
                            <!-- <el-divider direction="vertical"></el-divider> -->
                            <el-button type="primary" @click="handleAddBook(scope.row)" size="mini">添加已有课文</el-button>
                        </template>
                        <template v-else>
                            <el-button size="mini" @click="handleDelBook(scope.row)">删除课文</el-button><el-divider
                                direction="vertical"></el-divider>
                            <el-button type="primary" size="mini" @click="handleEditBook(scope.row)">更改课文</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <SelectTabPane v-if="visible" :visible.sync="visible" @handleConfirm="handleConfirm" /> -->
        <SelectMaterial v-if="visible" :visible.sync="visible" @handleSelectFiles="handleConfirm" :book_select="1"
            :edit_task_courseware_arr="edit_task_courseware_arr" :select_type="select_type" />
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import { COURSEWARE_TYPE } from '@/constant/kanke/courseware'
// import SelectTabPane from './SelectTabPane.vue';
import SelectMaterial from '../../components/SelectMaterial'

export default {
    name: "KanKeTextbookCourseWareBookContent",
    props: {
        content: {
            type: Array,
            default() {
                return []
            }
        },
        id: {
            type: [String, Number],
            default: ''
        }
    },
    components: {
        SelectMaterial
    },
    data() {
        return {
            unit: '',
            tableData: [],
            visible: false,
            edit_task_courseware_arr: [],
            select_type: [2, 3, 4],
            selectUnit: {},
        }
    },
    watch: {
        content: {
            handler(newVal) {
                if (newVal.length) {
                    this.tableData = [...newVal]

                }
            },
            immediate: true
        }
    },
    methods: {
        ...mapActions('courseware', ['addUnit', 'updateUnit', 'deleteUnit', 'deleteBookCourse', 'addSelectUnit', 'handleSort']),
        handleAddBook(val) {
            this.visible = true
            this.selectUnit = { ...val }
            this.edit_task_courseware_arr = val.content || []
        },
        // handleCommand(type, unit_id) {
        //     this.$store.commit('courseware/setContentDetail', {})
        //     this.$store.commit('courseware/setContent', [])
        //     this.$store.commit('courseware/setDetail', {})

        //     this.$router.push({ name: 'Bookdetail', query: { type, handleType: 'add', unit_id } })
        // },
        handleDelUnit({ id }) {
            this.$confirm('确认是否删除及关联内容, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteUnit({ id }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('删除成功')
                        this.$emit('onFinish')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleEditBook(row) {
            this.$store.commit('courseware/setContentDetail', {})
            this.$store.commit('courseware/setContent', [])
            this.$store.commit('courseware/setDetail', {})
            const type = COURSEWARE_TYPE[row.book_type]
            this.$router.push({ name: 'Bookdetail', query: { type, handleType: 'edit', id: row.id, 'source': 'book' } })
        },
        handleDelBook({ unit_id, id }) {
            this.$confirm('确认是否删除及关联内容, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteBookCourse({ id, unit_id }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('删除成功')
                        this.$emit('onFinish')
                    }
                })
            }).catch(() => {

            });
        },
        async handleAddUnit() {
            if (!this.unit) {
                this.$message.warning('请填写单元名称')
                return
            }
            if (!this.id) {
                this.$message.error('请先添加课本')
                return
            }
            const res = await this.addUnit({ title: this.unit, cw_id: this.id })
            if (res.code === 200) {
                this.unit = ''
                this.$message.success('添加成功')
                this.$emit('onFinish')
            }
        },
        handleRowkey(row) {
            if (row.unit_id) {
                return `{row.unit_id}-${row.id}`
            } else {
                return row.id
            }
        },
        handleRowStyle({ row }) {
            if (!row.unit_id) {
                return 'background: #FCF8E3;color: #606266;'
            }
        },

        handleEditUnit({ title, id }) {
            this.$prompt('请输入单元名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^.{1,50}$/, //不能为空, 长度 不超过 50
                inputErrorMessage: '单元名称不合法', // 错误提示
                inputValue: title,
            }).then(({ value }) => {
                this.updateUnit({ title: value, id }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('修改成功')
                        this.$emit('onFinish')
                    }
                })

            })
        },
        handleConfirm(val) {
            if (val.length) {
                const courseIdArr = val.map(item => item.id)
                const params = {
                    unit_id: this.selectUnit.id,
                    courseIdArr,
                }
                this.addSelectUnit(params).then(res => {
                    if (res.code === 200) {
                        this.$message.success(res.msg)
                        this.$emit('onFinish')
                        this.visible = false
                    }
                })
            }

        },
        onSort(e, row) {
            if (e.target) {
                let type = ''
                const sort_num = e.target.value
                if (row.cw_id) {
                    type = 1 //'unit'
                } else {
                    type = 2 //'course'
                }
                this.handleSort({
                    type,
                    id: row.id,
                    sort_num
                }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('排序成功')
                        this.$emit('onFinish')
                    }
                })
            }

        }
    }
}
</script>
<style lang="scss" scoped>
.content1 {
    &__top {
        &-t {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 20px;

            ::v-deep .el-input {
                width: 400px;
                margin-right: 30px;
            }
        }

        &-b {
            span {
                color: red;
            }
        }

    }

    &__bottom {
        margin-top: 10px;
    }



}
</style>